<template>
  <div class="mod-prod-info">
    <el-form :model="dataForm"
             ref="dataForm"
             label-width="100px">
      <div class="job-tlt">企业信息</div>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-select v-model="dataForm.factoryId" placeholder="请选择">
          <el-option
            v-for="item in factoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="列表图片" prop="icon">
        <pic-upload v-model="dataForm.icon" :single="true" />
        <div>1张图片、格式：图片格式:JPG/JPEG/PNG, 最大5M、最佳尺寸建议1200*800</div>
      </el-form-item>
      <el-form-item label="职位相关图片" prop="rotationImage" :rules="[{ required: true, message: '企业相关图片不能为空'}]">
        <MulPicUpload v-model="dataForm.rotationImage" />
        <div>1-10张图片、格式：图片格式:JPG/JPEG/PNG, 最大5M、最佳尺寸建议1200*800</div>
      </el-form-item>
      <el-form-item label="职位相关视频">
        <video-upload v-model="dataForm.videoUrl"/>
      </el-form-item>

      <el-form-item label="招聘联系人" prop="jobContactId">
        <el-select v-model="dataForm.jobContactId" placeholder="请选择">
          <el-option
            v-for="item in jobConcatList"
            :key="item.id"
            :label="item.name + (item.mobile)"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <div class="job-tlt">职位信息</div>
      <el-form-item label="职位分类" prop="jobCategoryId" :rules="[{ required: true, message: '职位分类不能为空'}]">
        <el-col :span="8">
          <el-select v-model="dataForm.jobCategoryId" style="width: 100%">
            <el-option v-for="(item,index) in jobCategoryList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="职位标题" prop="name" :rules="[{ required: true, message: '职位标题不能为空'}]">
        <el-col :span="8">
          <el-input v-model="dataForm.name"
                    type="text"
                    placeholder="职位标题"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="热度描述"
                    prop="hotTips" :rules="[{ required: true, message: '职位标题不能为空'}]">
        <el-col :span="8">
          <el-input v-model="dataForm.hotTips"
                    type="text"
                    placeholder="热度标签"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="dataForm.sort" @change="handleChange" :min="0" :max="10000" label="排序"></el-input-number>
      </el-form-item>

      <el-form-item label="开启招聘" prop="isStart">
        <el-switch
          v-model="dataForm.isStart"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>

      <el-form-item label="热度标签" prop="isHotLabel">
        <el-checkbox v-model="dataForm.isHotLabel"></el-checkbox>
      </el-form-item>

      <el-form-item label="职位标签" prop="title">
        <el-select v-model="dataForm.labelIdList" multiple placeholder="请选择">
          <el-option
            v-for="item in labelList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="工种（选填）"
                    prop="workType">
        <el-col :span="8">
          <el-input v-model="dataForm.workType"
                    type="text"
                    placeholder="请输入工种名称"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="结算方式" prop="settleMethod" :rules="[{ required: true, message: '结算方式不能为空'}]">
        <el-radio-group v-model="dataForm.settleMethod" @change="salaryTypeChange">
          <el-radio :label="1">月结</el-radio>
          <el-radio :label="0">日结</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="职位工资" prop="payType" :rules="[{ required: true, message: '职位工资类型不能为空'}]">
        <el-radio-group v-model="dataForm.payType" @change="salaryTypeChange">
          <el-radio :label="1">综合工资</el-radio>
          <el-radio :label="0">固定工资</el-radio>
        </el-radio-group>
        <div class="cell-input" v-show="dataForm.payType == 1">
          <el-input v-model="dataForm.minMoney" placeholder="请输入最低工资" style="margin-left: 0px"></el-input>
          <span>至</span>
          <el-input v-model="dataForm.maxMoney" placeholder="请输入最低工资"></el-input>
          <el-select v-model="dataForm.unit">
            <el-option v-for="(item, index) in salaryTypeList" :label="item.label" :value="item.value" :key="index+'maxSalary'"></el-option>
          </el-select>
        </div>
        <div class="cell-input" v-show="dataForm.payType == 0">
          <el-input v-model="dataForm.fixedMoney" placeholder="请输入固定工资" style="margin-left: 0px"></el-input>
          <el-select v-model="dataForm.unit">
            <el-option v-for="(item, index) in salaryTypeList" :label="item.label" :value="item.value" :key="index+'salary'"></el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item label="职位详情"
                    prop="description">
        <tiny-mce v-model="dataForm.jobDesc"
                  ref="content"
                  style="width:1000px"></tiny-mce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        <el-button @click.stop="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import MulPicUpload from '@/components/mul-pic-upload'
  import TinyMce from '@/components/tiny-mce'
  import VideoUpload from '@/components/video-upload'
  import PicUpload from '@/components/pic-upload/index'
  export default {
    data () {
      return {
        // 分类树展示与回显
        loading:false,
        category: {
          list: [],
          selected: [],
          props: {
            value: 'categoryId',
            label: 'categoryName'
          }
        },
        options: [],
        props: {
          multiple: false,
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        jobCategoryList:[],
        factoryList:[],
        labelList:[],
        jobConcatList:[],
        salaryTypeList: [
          {
            label: '元/小时',
            value: '元/小时'
          },
          {
            label: '元/天',
            value: '元/天'
          },
          {
            label: '元/周',
            value: '元/周'
          },
          {
            label: '元/月',
            value: '元/月'
          }
        ],
        // 规格列表
        dataForm: {
          factoryId:'',
          jobCategoryId:'',
          videoUrl:'',
          address: '',
          icon:'',
          isHotLabel:0,
          rotationImage: '',
          name: '',
          workType: '',
          unit: '元/月',
          payType: 1,
          minMoney: '',
          maxMoney: '',
          fixedMoney: '',
          id: 0,
          jobDesc: '',
          settleMethod: 0,
          hotTips: '',
          labelIdList: [],
          jobContactId: '',
          sort:0,
          isStart:0
        },
        tags: [],
        resourcesUrl: window.SITE_CONFIG.resourcesUrl
      }
    },
    components: {
      MulPicUpload,
      TinyMce,
      VideoUpload,
      PicUpload
    },

    activated () {
      this.dataForm.id = this.$route.query.id
      this.getDataList()
      this.getJobCategoryList()
      this.getFactoryList()
      this.getLabelList()
      this.getConcatList()
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },

      getConcatList () {
        this.$http({
          url: this.$http.adornUrl('/v1/job/contact/all/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.jobConcatList = data.data
          console.log(this.jobConcatList)
        })
      },

      getLabelList () {
        this.$http({
          url: this.$http.adornUrl('/v1/job/label/all/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.labelList = data.data
        })
      },

      getFactoryList () {
        this.$http({
          url: this.$http.adornUrl('/v1/factory/all/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.factoryList = data.data
        })
      },

      getJobCategoryList () {
        this.$http({
          url: this.$http.adornUrl('/v1/job/category/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.jobCategoryList = data.data
        })
      },

      // 获取分类数据
      getDataList () {
        if (this.dataForm.id) {
          // 获取产品数据
          this.$http({
            url: this.$http.adornUrl(`/v1/job/detail`),
            method: 'get',
            params: this.$http.adornParams({id: this.dataForm.id})
          }).then(({ data }) => {
            this.dataForm = data.data
            this.dataForm.rotationImage = data.data.rotationImage
            this.dataForm.labelIdList = data.data.labelIdList
            this.dataForm.isHotLabel = data.data.isHotLabel==1? true : false
            this.dataForm.isStart = data.data.isStart==1? true : false
            // this.tags = data.labels
          })
        } else {
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
            this.dataForm.enterpriseImages = ''
            this.getTagList()
          })
        }
      },

      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          // if (!valid) {
          //   return
          // }
          // if (!this.tags) {
          //   this.errorMsg('请选择图片上传')
          //   return
          // }
          // if (this.payType === 0&&!this.dataForm.fixedMoney){
          //   this.errorMsg('请输入工资')
          //   return
          // }
          // if (this.payType === 1&&(!this.dataForm.minMoney||!this.dataForm.maxMoney)){
          //   this.errorMsg('请输入工资')
          //   return
          // }
          // if (this.dataForm.description.length <= 0) {
          //   this.errorMsg('请输入描述')
          //   return
          // }
          // let labelIds = []
          // let findArr = this.tags.filter((tag) => {
          //   return tag.isSelect === 1||tag.isSelect==true
          // })
          // findArr.forEach((item) => {
          //   labelIds.push(item.id)
          // })
          this.dataForm.isHotLabel = this.dataForm.isHotLabel?1:0;
          this.dataForm.isStart = this.dataForm.isStart?1:0;
          let param = Object.assign({}, this.dataForm)
          // 商品主图
          // param.enterpriseImages = this.dataForm.imgs.split(',')
          this.loading=true
          this.$http({
            url: this.$http.adornUrl(param.id?'/v1/job/update':'/v1/job/add'),
            method: 'post',
            data: this.$http.adornData(param)
          }).then(({ data }) => {
            this.loading=false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$store.commit('common/removeMainActiveTab')
                this.$router.push({ name: 'job-index' })
                this.$emit('refreshDataList')
              }
            })
          })
        })
      },

      errorMsg (message) {
        this.$message({
          message: message,
          type: 'error',
          duration: 1500
        })
      },

      salaryTypeChange () {
        this.$forceUpdate()
        this.dataForm.minMoney = ''
        this.dataForm.maxMoney = ''
        this.dataForm.fixedMoney = ''
        this.dataForm.unit = '元/月'
      },
      cancel(){
        this.$router.back()
      }
    }
  }
</script>

<style lang="scss">
  .job-tlt{
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333333;
  }

  .cell-input{
    display: flex;
    justify-content: flex-start;
    .el-input{
      width: 150px;
      margin-right: 10px;
      margin-left: 10px;
    }
  }

  .tag-list{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style:none;
    padding-left: 0px;
    li{
      padding: 8px 12px;
      border: solid 1px #e6e6e6;
      margin-right: 12px;
      border-radius: 4px;
    }
  }

  .selectTag{
    color: white;
    background-color: #009FF1;
  }

</style>
